@use 'utils/functions';

.Separator {
    position: relative;
    z-index: 1;
    height: 1px;
    margin: 0;
    margin-top: -1em;
    margin-bottom: 1em;
    pointer-events: none;
    text-align: center;

    &::before,
    &::after {
        position: absolute;
        left: 0;
        display: none;
        width: 100%;
        height: 1em;
        content: '';
    }

    &::before {
        bottom: 0;
    }

    &::after {
        top: 0;
    }

    &.hovered--after {
        &::before {
            display: block;
            background: #f5f5f5;
        }
    }

    &.hovered--before {
        &::after {
            display: block;
            background: #f5f5f5;
        }
    }

    .separator__hr {
        position: relative;
        z-index: 5;
        top: 1em;
        border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
        margin: 0;
    }

    .separator__text {
        position: relative;
        z-index: 5;
        display: inline-block;
        padding: 0 1em;
        border-radius: 50px;
        background: functions.v(center-channel-bg);
        color: functions.v(center-channel-color);
        font-size: 13px;
        font-weight: 700;
        line-height: 2em;
    }
}

@media screen and (max-width: 1440px) {
    .Separator {
        &.hovered--comment {
            &::before,
            &::after {
                background: none !important;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .Separator {
        &.hovered--after {
            &::before {
                background: none;
            }
        }

        &.hovered--before {
            &::after {
                background: none;
            }
        }
    }
}

@media print {
    .Separator .separator__hr {
        top: 1.7em;
    }
}
